<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtmBox">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../css/reset-min.css">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<title></title>
</head>

<body>


	<div class="xsWrap">
		<!-- 顶导 -->
		<div class="topNav clearfix">
			<div class="navBox">
				<div class="navSquare"><a class="navMode" href="#"><span class="navLTxt">广场</span><em class="xsIcon navMore"></em></a>
					<div class="squareLayer">
						<ul class="layerColor">
							<li class="layerL"><a href="#" class="colorIcon photoBox"><span class="xsIcon icon_photoS"></span></a><a class="colorTxt" href="#" >摄影</a></li>
							<li class="layerL"><a href="#" class="colorIcon beautyBox"><span class="xsIcon icon_beautyS"></span></a><a class="colorTxt" href="#" >美妆服饰</a></li>
							<li class="layerL"><a href="#" class="colorIcon beautyBox"><span class="xsIcon icon_foodS"></span></a><a class="colorTxt" href="#" >美食</a></li>
							<li class="layerL"><a href="#" class="colorIcon sportBox"><span class="xsIcon icon_sportS"></span></a><a class="colorTxt" href="#" >运动</a></li>
							<li class="layerL"><a href="#" class="colorIcon techBox"><span class="xsIcon icon_techS"></span></a><a class="colorTxt" href="#" >科技生活</a></li>
							<li class="layerL"><a href="#" class="colorIcon gameBox"><span class="xsIcon icon_gameS"></span></a><a class="colorTxt" href="#" >游戏</a></li>
							<li class="layerL"><a href="#" class="colorIcon homeBox"><span class="xsIcon icon_homeS"></span></a><a class="colorTxt" href="#" >家居设计</a></li>
							<li class="layerL"><a href="#" class="colorIcon petBox"><span class="xsIcon icon_petS"></span></a><a class="colorTxt" href="#" >宠物</a></li>
							<li class="layerL"><a href="#" class="colorIcon musicBox"><span class="xsIcon icon_musicS"></span></a><a class="colorTxt" href="#" >音乐</a></li>
							<li class="layerL"><a href="#" class="colorIcon carBox"><span class="xsIcon icon_carS"></span></a><a class="colorTxt" href="#" >汽车</a></li>

						</ul>					

					</div>

				</div>
				<div class="navSearch">
					<div class="navSearBox"><input type="text" placeholder="请输入关键字" class="navSearInput"><span class="xsIcon icon_search"></span></div>
				</div>
			</div>

			<div class="navR">
				<!-- 已登录 -->
				<ul class="navRList clearfix">
					<li class="navli userAdd"><a class="navMode" href=""><span class="xsIcon icon_add"></span></a>
						<!-- 发布弹层 点击【+】出现 -->
						<div class="pubLayer">
							<p class="pubLi"><a href="#" class="logLiTxt">发布文章</a></p>
							<!-- 点击【发布专辑】出现 创建专辑弹层 -->	
							<p class="pubLi"><a href="#" class="logLiTxt">创建专辑</a></p>	
						</div>
						<!-- /发布弹层 -->
					</li>
					<li class="navli usermsg"><a class="navMode" href=""><span class="xsIcon icon_msg"></span><em class="msgNum">99+</em></a></li>
					<li class="navli userNotice"><a class="navMode" href=""><span class="xsIcon icon_notice"></span></a>
						<div class="noticeLayer">
							<p class="noticeTit">我的消息</p>
							<!-- 通知弹层 点击【我的消息】出现 -->
							<div class="noticeListBox">
								<ul class="noticeList">
									<li class="clearfix">
										<a class="noticeImg"><img src="../images/userS.jpg" alt></a>
										<div class="noticeMain">
											<p class="noticeName"><a class="nameTxt">用户昵称八个字啊</a></p>
											<p class="noticeCon">转采了你的专辑<a class="noAlName">小小花蛤</a>到<a class="noAlNameT">小小花蛤</a></p>
										</div>
									</li>
									<li class="clearfix">
										<a class="noticeImg"><img src="../images/userS.jpg" alt></a>
										<div class="noticeMain">
											<p class="noticeName"><a class="nameTxt">用户昵称八个字啊</a></p>
											<p class="noticeCon">转采了你的专辑<a class="noAlName">小小花蛤</a>到<a class="noAlNameT">小小花蛤</a></p>
										</div>
									</li>
									<li class="clearfix">
										<a class="noticeImg"><img src="../images/userS.jpg" alt></a>
										<div class="noticeMain">
											<p class="noticeName"><a class="nameTxt">用户昵称八个字啊</a></p>
											<p class="noticeCon">转采了你的专辑<a class="noAlName">小小花蛤</a>到<a class="noAlNameT">小小花蛤</a></p>
										</div>
									</li>
									<li class="clearfix">
										<a class="noticeImg"><img src="../images/userS.jpg" alt></a>
										<div class="noticeMain">
											<p class="noticeName"><a class="nameTxt">用户昵称八个字啊</a></p>
											<p class="noticeCon">转采了你的专辑<a class="noAlName">小小花蛤</a>到<a class="noAlNameT">小小花蛤</a></p>
										</div>
									</li>									
								</ul>
								<p class="noticeMore"><a class="noticeMoreTxt">查看所有消息>></a></p>
							</div>
							<!-- /通知弹层 -->
						</div>

					</li>
					<li class="navli userLog"><a class="navMode" href=""><img src="../images/userS.jpg" alt="" class="headImg"><em class="xsIcon navMore"></em></a>
						<!-- 用户弹层 -->
						<div class="logLayer">
							<p class="logLi"><a href="#" class="logLiTxt">消息箱</a></p>	
							<p class="logLi"><a href="#" class="logLiTxt">用户设置</a></p>	
							<p class="logLi"><a href="#" class="logLiTxt">退出登录</a></p>	
						</div>
						<!-- /用户弹层 -->
					</li>
				</ul>
				<!-- /已登录 -->

				<!-- 未登录 
				<div class="unLogList"><a class="btnB" href="#">登录</a><a class="btnB" href="#">注册</a></div>
				 /未登录 -->

			</div>

			<div class="navLogo"><a class="logoBox"><img src="../images/logoM.png" alt=""></a></div>
		</div>
		<!-- /顶导 -->
		<!-- main -->
		<div class="mainBox clearfix">
			<div class="xsNLayout">
				<div class="xsBorBox">
					<div class="xsTabBox">
						<ul class="xsTab clearfix">
							<li class="tabList"><a href="#" class="tabTxt cur">全部消息</a></li>
							<li class="tabList"><a href="#" class="tabTxt">评论</a></li>
							<li class="tabList"><a href="#" class="tabTxt">动态</a></li>						
						</ul>
					</div>

					<div class="noticeWBox">
						<!-- 每页10条 -->
						<ul class="noticeWList">
							<!-- 动态例子 -->
							<li>
								<div class="noUserImg"><a class="userPic" href="#"><img src="../images/userL.jpg" alt="" class="userImg"></a></div>

								<div class="notiDetail">
									<p class="notiUser"><a class="notiName" href="#">用户昵称</a><span class="notiDate">2014-06-20 13:14:10</span></p>
									<p class="notiCon">转采了你的专辑<a class="notiAl" href="#">小小花蛤</a>到<a class="notiAl" href="#">另外一个专辑</a></p>
								</div>

							</li>
							<!-- /动态例子 -->
							<!-- 评论例子 -->
							<li>
								<div class="noUserImg"><a class="userPic" href="#"><img src="../images/userL.jpg" alt="" class="userImg"></a></div>

								<div class="notiDetail">
									<p class="notiUser"><a class="notiName" href="#">用户昵称</a>评论了<a class="notiAl" href="#">博客名</a><span class="notiDate">2014-06-20 13:14:10</span></p>
									<p class="notiCon">哈哈哈哈哈！</p>
								</div>

							</li>
							<!-- /评论例子 -->
							<li>
								<div class="noUserImg"><a class="userPic" href="#"><img src="../images/userL.jpg" alt="" class="userImg"></a></div>

								<div class="notiDetail">
									<p class="notiUser"><a class="notiName" href="#">用户昵称</a><span class="notiDate">2014-06-20 13:14:10</span></p>
									<p class="notiCon">转采了你的专辑<a class="notiAl" href="#">小小花蛤</a>到<a class="notiAl" href="#">另外一个专辑</a></p>
								</div>

							</li>
							<li>
								<div class="noUserImg"><a class="userPic" href="#"><img src="../images/userL.jpg" alt="" class="userImg"></a></div>

								<div class="notiDetail">
									<p class="notiUser"><a class="notiName" href="#">用户昵称</a><span class="notiDate">2014-06-20 13:14:10</span></p>
									<p class="notiCon">转采了你的专辑<a class="notiAl" href="#">小小花蛤</a>到<a class="notiAl" href="#">另外一个专辑</a></p>
								</div>

							</li>


						</ul>

						<div class="xsPageBox">
							<div class="xsPage">
					        	<a href="">上一页</a>
					        	<a href="" class="cur">1</a>
					        	<a href="">2</a>
					        	<a href="">3</a>
					        	<a href="">下一页</a>
					        </div>
						</div>

					</div>


				</div>
			</div>
		</div>

		<!-- /main -->

	</div>




</body>
</html>
